<template>
	<view class="add-container">
		<u-form :model="form" :labelStyle="lstyle" labelPosition="left" label-width="110" label-align="left"
			:rules="rules" ref="uForm1" class="form-container">
			<view class="header">
				<view class="logo">{{readonly || index == null ? '同' : '改'}}</view>
				<view class="title">{{readonly || index == null ? '同行人信息' : '修改'}}</view>
			</view>

			<u-form-item label="访客姓名" prop="name" required borderBottom>
				<u-input fontSize="14px"  :readonly="readonly" v-model="form.name" border="none" placeholder="请输入访客姓名"></u-input>
			</u-form-item>
			<u-form-item label="访客电话" prop="phone" required borderBottom>
				<u-input fontSize="14px"  :readonly="readonly" type="number" v-model="form.phone" border="none" maxlength="11"
					placeholder="请输入访客电话"></u-input>
			</u-form-item>
			<!-- <u-form-item label="访客身份证" prop="cardNo"  borderBottom>
				<u-input fontSize="14px"  :readonly="readonly" type="idcard" v-model="form.cardNo" border="none" maxlength="18"
					placeholder="请输入访客身份证"></u-input>
			</u-form-item> -->
		</u-form>
		
		<view class="submit" v-if="readonly">
			<u-button color="#920076" @click="back">返回</u-button>
		</view>

		<view class="submit" v-else-if="index == null">
			<u-button color="#920076" @click="submit">确定</u-button>
		</view>
		
		<view class="edit" v-else>
			<u-button color="#920076" @click="edit">修改</u-button>
			<u-button color="#b4141f" @click="del">删除</u-button>
		</view>
		
		
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		data() {
			return {
				index:null,
				tabIndex: 0,
				showDatePicker: false,
				readonly: false,
				form: {
					name: '',
					phone: '',
					cardNo: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入访客姓名',
						trigger: ['blur', 'change']
					}],
					phone: [{
							required: true,
							message: '请输入访客电话',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '请输入正确的手机号',
							// 触发器可以同时用blur和change
							trigger: ['blur', 'change'],
						}
					],
					cardNo: [{
						required: false,
						message: '请输入访客身份证',
						trigger: ['blur', 'change']
					}, 
					// {
					// 	validator: (rule, value, callback) => {
					// 		// 上面有说，返回true表示校验通过，返回false表示不通过
					// 		// uni.$u.test.mobile()就是返回true或者false的
					// 		const regex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
					// 		return regex.test(value);
					// 	},
					// 	message: '请输入正确的身份证',
					// 	// 触发器可以同时用blur和change
					// 	trigger: ['blur', 'change'],
					// },
					],
				}
			}
		},
		computed: {
			lstyle() {
				return {
					fontSize: '32rpx'
				}
			}
		},
		onLoad(e) {
			if (e.index) {
				this.index = e.index
				let companions = uni.getStorageSync("companions")
				this.form = companions[e.index]
				this.readonly = e.status !== '0'
				if(this.readonly){
					uni.setNavigationBarTitle({
						title: "查看同行人"
					})
				}else{
					uni.setNavigationBarTitle({
						title: "修改/删除同行人"
					})
				}
				
			}

		},
		methods: {
			back(){
				uni.navigateBack()
			},
			edit(){
				let companions = uni.getStorageSync("companions")
				companions.splice(this.index, 1,this.form);
				uni.setStorageSync("companions",companions)
				uni.navigateBack()
			},
			del(){
				let companions = uni.getStorageSync("companions")
				companions.splice(this.index, 1);
				uni.setStorageSync("companions",companions)
				uni.navigateBack()
			},
			submit() {
				this.$refs.uForm1.validate().then(res => {
					let companions = uni.getStorageSync("companions") || []
					companions.push(this.form)
					uni.setStorageSync("companions",companions)
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-placeholder{
		font-size: 12px;
	}
	.add-container {
		width: 100%;
		min-height: 100vh;
		background: #f3f3f3;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 30rpx;
		// justify-content: center;

		.mg-top30 {
			margin-top: 16rpx;
		}

		.header {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #888888;
			margin-bottom: 16rpx;
			// height: 70rpx;

			.logo {
				margin-left: -48rpx;
				height: 40rpx;
				width: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				border: 1px solid #3cbfad;
				color: #3cbfad;
				text-align: center;
				border-radius: 50%
			}

			.title {
				// height: 40rpx;
				// line-height: 40rpx;
				margin-left: 10rpx;
				// margin-bottom: 20rpx;
			}

		}

		.submit {
			width: 94%;
			margin-top: 40rpx;
			margin-bottom: 60rpx;
		}
		
		.edit{
			display: flex;
			width: 92%;
			gap: 90rpx;
			margin-top: 40rpx;
			margin-bottom: 60rpx;
		}

		.form-container {
			z-index: 999;
			background: #fff;
			border-radius: 10rpx;
			z-index: 99;
			padding: 20rpx 40rpx 30rpx 60rpx;
			width: 80%;
		}



	}
</style>